<template>
    <div class="menu-scroll">
            <ul class="menu-ul">
                <li v-for="i in 10" :key="i">
                    医美百科
                    <span class="small-title">项目知识</span>
                </li>
            </ul>
    </div>
</template>

<script>
    export default {
        name: "scroll"
    }
</script>

<style scoped>
    .menu-scroll {
        height: 70px;
        width: 100%;
        padding-left: 10px;
        box-sizing: border-box;
        user-select: none;
        margin-top: 10px;
    }
    .menu-ul {
        display: flex;
        flex-wrap: nowrap;
        height: 50px;
        overflow-x: scroll;

    }
    .menu-ul::-webkit-scrollbar{
        display: none;
    }
    .menu-scroll li {
        width: 100px;
        height: 100%;
        background: url("https://mstatic.soyoung.com/m/static/fe_m/view/home/img/wiki-06085b14f7.png") no-repeat;
        background-size: 25px 25px;
        background-position: bottom 10px right 10px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        padding: 5px;
        box-sizing: border-box;
        box-shadow: 0 0.06rem 0.16rem 0 rgba(0, 0, 0, 0.1);
        min-width: 100px;
        margin: 0 10px;
    }

    .menu-scroll li .small-title {
        font-size: 10px;
        color: #666666;
    }
</style>